<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="iconfont icon-back" @tap="goBack">←</text>
      <text class="title">预约拍摄</text>
    </view>

    <!-- 摄影师信息 -->
    <view class="photographer-info">
      <view class="info-box">
        <image :src="photographer.avatar" class="avatar"></image>
        <view class="info">
          <text class="name">{{ photographer.name }}</text>
          <view class="rating">
            <text class="iconfont icon-star">⭐</text>
            <text>{{ photographer.rating }} ({{ photographer.ratingCount }}条评价)</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 预约表单 -->
    <view class="booking-form">
      <view class="form-group">
        <text class="form-label">选择套餐</text>
        <view class="package-list">
          <view 
            v-for="(pkg, index) in photographer.packages" 
            :key="index" 
            :class="['package-item', selectedPackage === index ? 'selected' : '']"
            @tap="selectPackage(index)"
          >
            <view class="package-header">
              <text class="package-name">{{ pkg.name }}</text>
              <text class="package-price">¥{{ pkg.price }}</text>
            </view>
            <view class="package-content">
              <view 
                v-for="(item, idx) in pkg.items" 
                :key="idx" 
                class="package-item-detail"
              >
                <text class="iconfont icon-check">✓</text>
                <text>{{ item }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="form-group">
        <text class="form-label">选择日期</text>
        <view class="date-picker">
          <picker mode="date" :value="bookingDate" start="2023-01-01" end="2023-12-31" @change="onDateChange">
            <view class="picker-item">
              <text>{{ bookingDate || '请选择日期' }}</text>
              <text class="iconfont icon-arrow">▼</text>
            </view>
          </picker>
        </view>
      </view>

      <!-- 选择时间段 -->
      <view class="form-group">
        <text class="form-label">选择时间段</text>
        <view class="time-slots">
          <view 
            v-for="(slot, index) in timeSlots" 
            :key="index" 
            :class="['time-slot', selectedTimeSlot === index ? 'selected' : '', slot.available ? '' : 'disabled']"
            @tap="selectTimeSlot(index, slot.available)"
          >
            {{ slot.time }}
          </view>
        </view>
      </view>

      <view class="form-group">
        <text class="form-label">备注信息</text>
        <textarea class="remark-input" placeholder="请输入您的特殊需求或注意事项" v-model="remark"></textarea>
      </view>
    </view>

    <!-- 底部提交按钮 -->
    <view class="submit-bar">
      <view class="price-info">
        <text class="price-label">总价</text>
        <text class="price-value">¥{{ totalPrice }}</text>
      </view>
      <button class="submit-btn" @tap="submitBooking">提交预约</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      photographer: {
        id: 1,
        name: '小明摄影',
        avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
        rating: 4.9,
        ratingCount: 125,
        packages: [
          {
            name: '基础套餐',
            price: 199,
            items: ['30分钟拍摄', '5张精修', '电子版交付']
          },
          {
            name: '标准套餐',
            price: 299,
            items: ['60分钟拍摄', '10张精修', '电子版交付', '1张放大冲印']
          },
          {
            name: '豪华套餐',
            price: 499,
            items: ['120分钟拍摄', '20张精修', '电子版交付', '3张放大冲印', '精美相册']
          }
        ]
      },
      selectedPackage: 0,
      bookingDate: '',
      selectedTimeSlot: -1,
      timeSlots: [
        { time: '09:00-10:00', available: true },
        { time: '10:00-11:00', available: true },
        { time: '11:00-12:00', available: false },
        { time: '13:00-14:00', available: true },
        { time: '14:00-15:00', available: true },
        { time: '15:00-16:00', available: true },
        { time: '16:00-17:00', available: false },
        { time: '17:00-18:00', available: true }
      ],
      remark: ''
    }
  },
  computed: {
    totalPrice() {
      if (this.selectedPackage >= 0 && this.photographer.packages[this.selectedPackage]) {
        return this.photographer.packages[this.selectedPackage].price;
      }
      return 0;
    }
  },
  onLoad(options) {
    this.id = options.id;
    // 这里应该根据id从服务器获取摄影师信息
    // this.getPhotographerInfo(this.id);
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    selectPackage(index) {
      this.selectedPackage = index;
    },
    onDateChange(e) {
      this.bookingDate = e.detail.value;
    },
    selectTimeSlot(index, available) {
      if (available) {
        this.selectedTimeSlot = index;
        console.log('已选择时间段:', this.timeSlots[index].time);
      }
    },
    
    submitBooking() {
      if (this.selectedPackage < 0) {
        uni.showToast({
          title: '请选择套餐',
          icon: 'none'
        });
        return;
      }
      
      if (!this.bookingDate) {
        uni.showToast({
          title: '请选择日期',
          icon: 'none'
        });
        return;
      }
      
      if (this.selectedTimeSlot < 0) {
        uni.showToast({
          title: '请选择时间段',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 提交预约信息
      const bookingInfo = {
        photographerId: this.id,
        packageId: this.selectedPackage,
        packageName: this.photographer.packages[this.selectedPackage].name,
        price: this.photographer.packages[this.selectedPackage].price,
        date: this.bookingDate,
        timeSlot: this.timeSlots[this.selectedTimeSlot].time,
        remark: this.remark
      };
      
      console.log('提交预约信息:', bookingInfo);
      
      uni.showLoading({
        title: '提交中...'
      });
      
      // 模拟提交
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '预约成功',
          icon: 'success'
        });
        
        // 跳转到订单页面
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/orders/orders'
          });
        }, 1500);
      }, 2000);
    }
  }
}
</script>

<style>
.container {
  padding-bottom: 120rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}

.icon-back {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
}

.photographer-info {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.info-box {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
  color: #1F2937;
}

.rating {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #6B7280;
}

.icon-star {
  color: #FBBF24;
  margin-right: 4rpx;
}

.booking-form {
  background-color: #fff;
  padding: 20rpx;
}

.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  font-weight: 500;
  color: #1F2937;
  margin-bottom: 16rpx;
  display: block;
}

.package-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.package-item {
  border: 2rpx solid #E5E7EB;
  border-radius: 12rpx;
  padding: 20rpx;
  transition: all 0.3s;
}

.package-item.selected {
  border-color: #8B5CF6;
  background-color: #F5F3FF;
}

.package-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.package-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #1F2937;
}

.package-price {
  font-size: 28rpx;
  font-weight: 600;
  color: #8B5CF6;
}

.package-content {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.package-item-detail {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #6B7280;
}

.icon-check {
  color: #10B981;
  margin-right: 8rpx;
}

.date-picker {
  border: 2rpx solid #E5E7EB;
  border-radius: 12rpx;
  overflow: hidden;
}

.picker-item {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-arrow {
  font-size: 24rpx;
  color: #9CA3AF;
}

.time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.time-slot {
  padding: 16rpx 24rpx;
  border: 2rpx solid #E5E7EB;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #1F2937;
  transition: all 0.3s;
}

.time-slot.selected {
  border-color: #8B5CF6;
  background-color: #F5F3FF;
  color: #8B5CF6;
}

.time-slot.disabled {
  background-color: #F3F4F6;
  color: #9CA3AF;
  border-color: #F3F4F6;
  cursor: not-allowed;
}

.remark-input {
  width: 100%;
  height: 160rpx;
  border: 2rpx solid #E5E7EB;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.submit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.price-info {
  display: flex;
  align-items: baseline;
}

.price-label {
  font-size: 24rpx;
  color: #6B7280;
  margin-right: 8rpx;
}

.price-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #8B5CF6;
}

.submit-btn {
  background-color: #8B5CF6;
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
  padding: 16rpx 40rpx;
  border-radius: 8rpx;
  border: none;
}
</style>